<template>
	<div>
		<div>  
	        <swiper :options="swiperOption"  ref="mySwiper">  
	            <!-- 这部分放你要渲染的那些内容 -->  
	             <swiper-slide><img src='./img/1.jpg'/></swiper-slide>
				 <swiper-slide><img src='./img/2.jpg'/></swiper-slide>
				 <swiper-slide><img src='./img/3.jpg'/></swiper-slide>
				 <swiper-slide><img src='./img/4.jpg'/></swiper-slide> 
	            <!-- 这是轮播的小圆点 -->  
	            <div class="swiper-pagination" slot="pagination"></div>  
	        </swiper>  
	    </div> 
		<ul class="mydata">
			<!-- 内容 -->
			<li v-for='i in datafn' @click="hrefto(i.aid)">
				<img v-lazy="i.litpic"/>
				<div >
				<p>{{i.title}}</p>
				<p>{{i.description}}</p>
				</div>
			</li>
			<p class="loadmore" @click='loadmore()'>{{html}}</p>
		</ul>
	</div>
</template>
<style>
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0.5;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;margin-top: 0;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0.5;}  
    100% {opacity: 1;margin-top: 0;}  
} 
.swiper-container {
    width: 100%;
    height:5.333333rem;
} 
.swiper-container  img{
	width: 100%;
	height: 100%;
	animation: fade-in;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 1s;/*针对webkit内核*/ 
}
.swiper-pagination-bullet{
	height: 0.533333rem;
	width: 0.533333rem;
}
.swiper-pagination-bullet-active{
	background: red;
}
.mydata	li{
		display: flex;
		padding: 0.266667rem 0.266667rem;
		border-bottom: 2px solid #e7e7e7;
		height: 2.0rem;

	}
.mydata	li>img{
	width: 2.4rem;
	height: 2.0rem;
	
}
.mydata	li>img[lazy=loaded]{
	animation: fade-in;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 1s;/*针对webkit内核*/
}
.mydata	li div>p{
	text-indent: 0.4rem;
	width:6.666667rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
.mydata	li div>p:first-of-type{
	    font-size:0.453333rem;
	   
	}
.mydata	li div>p:last-of-type{
	color: gray;
	}
	.mydata>p{
		text-align: center;
		color: gray;
		font-size: 0.373333rem;
		margin-top: 0.266667rem;
	}
/* .toTop{position:fixed;bottom:10px;right:20px; z-index:999;display:none; font-size:16px;cursor: pointer;overflow:hidden;visibility:visible; background-color:#fff;border: 1px solid #d9d9d9;color: #9c9c9c;font-size: 16px;width: 38px;height: 38px;line-height: 38px;text-align: center; text-decoration:none;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight)}
.toTop:hover{ color:#fff; text-decoration:none; background-color:#999} */
</style>
<script>
 import { swiper, swiperSlide } from 'vue-awesome-swiper' ;
	export default {
		components: {  
            swiper,  
            swiperSlide  
        },
		data(){
			return {
				dat1:[],
				index:0,
				html:'加载更多',
				swiperOption: {  
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                notNextTick: true,  
                pagination: '.swiper-pagination',  
                slidesPerView: 'auto',
                autoplayDisableOnInteraction : false,  
                paginationClickable: true,  
                autoplay: 5000, 
                touchRatio : 0.5 ,
                loop:true  
                } 
			}
		},
		methods:{
			//点击加载更多的方法
			loadmore(){
				this.index++;
				this.$http({
					url:'/quanmin',
					params: {
						num: this.$store.state.Id,
						page:this.index
					}
				}).then(function(res){
					this.$store.state.dataList=this.$store.state.dataList.concat(res.body.list.articles)
				})
			},
			/*$(function(){
				$(window).on("scroll",backToTopFun);
					backToTopFun()});*/
			//抓取不到id对应的详情页数据,只能跳到人家的网站去了
			hrefto(id){
				console.log(id);
				window.location.href='http://www.dongqiudi.com/share/article/'+id+'';
			}
		},
		computed:{
			 swiper() {  
              return this.$refs.mySwiper.swiper;  
            },
            datafn(){
            	return this.$store.state.dataList;
            }
		}
	}
</script>